<template>
  <div class="m-page">
    <van-nav-bar
      class="m-page__bar"
      title="我的团队"
      left-arrow
      @click-left="onClickLeft"
      right-text="添加成员"
      @click-right="addTeamItem"
    />
    <van-tabs v-model="active" @change="changeActive">
      <van-tab
        v-for="(obj, index) of memberList"
        :key="index"
        :title="columns[index]"
      >
        <van-cell
          v-for="(item, item_idx) of obj.groupMemberList"
          :key="item_idx"
          class="g-mb--10"
          :title="item.name"
          size="large"
          :label="item.mobile"
        >
          <van-button
            class="g-mt--5"
            slot="right-icon"
            type="primary"
            size="small"
            @click="goToPurchaseRecord(index, item_idx)"
            >购买记录</van-button
          >
        </van-cell>
      </van-tab>
    </van-tabs>
    <!-- 弹窗 start -->
    <van-dialog
      :before-close="beforeClose"
      v-model="show"
      confirm-button-text="确认"
      show-cancel-button
    >
      <h2 class="m-dialog-title">添加成员</h2>
      <van-cell-group>
        <van-field v-model="name" type="text" placeholder="请输入姓名" />
        <van-field v-model="mobile" type="tel" placeholder="请输入手机" />
        <van-cell
          @click="showPicker"
          title-class="g-c--gray"
          is-link
          arrow-direction="down"
        >
          <template slot="title">
            <span>{{ personal_type_text }}</span>
          </template>
        </van-cell>
      </van-cell-group>
    </van-dialog>
    <!-- 弹窗 end -->
    <!-- 选择身份 start -->
    <van-popup v-model="show_picker" position="bottom">
      <van-picker
        ref="picker"
        show-toolbar
        title="身份类型"
        :columns="columns"
        @cancel="onCancel"
        @confirm="onConfirm"
      />
    </van-popup>
    <!-- 选择身份 end -->
  </div>
</template>

<script>
import {
  NavBar,
  Cell,
  CellGroup,
  Panel,
  Tab,
  Tabs,
  Button,
  Picker,
  Popup,
  Field
} from "vant";
import { teamModel } from "@/api";
import Tool from "@/lib/tool";
import Util from "@/lib/util";
const tool = new Tool();
const util = new Util();
export default {
  name: "my_team",
  components: {
    "van-nav-bar": NavBar,
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    "van-panel": Panel,
    "van-tab": Tab,
    "van-tabs": Tabs,
    "van-button": Button,
    "van-picker": Picker,
    "van-popup": Popup,
    "van-field": Field
  },
  data() {
    return {
      active: 0,
      mobile: "",
      name: "",
      type: "",
      show: false,
      show_picker: false,
      personal_type: "",
      personal_type_text: "请选择身份",
      columns: ["总代", "一级代理", "二级代理"],
      memberList: []
    };
  },
  created() {
    const active = this.$route.params.active;
    this.active = active;
    this.getMemberList();
  },
  methods: {
    /* 获取团队列表 */
    getMemberList() {
      const getMemberList0 = teamModel._getMemberList({
        type: this.columns[0]
      });
      const getMemberList1 = teamModel._getMemberList({
        type: this.columns[1]
      });
      const getMemberList2 = teamModel._getMemberList({
        type: this.columns[2]
      });
      Promise.all([getMemberList0, getMemberList1, getMemberList2]).then(
        res => {
          this.memberList = res;
        }
      );
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    /* 打开添加团队成员弹窗 */
    addTeamItem() {
      this.show = true;
    },
    /* 打开选择团队成员类型弹窗 */
    showPicker() {
      this.show_picker = true;
      this.$refs.picker.setIndexes([0]);
    },
    beforeClose(action, done) {
      const formData = {
        name: this.name,
        mobile: this.mobile,
        type: this.type
      };
      if (action === "confirm") {
        if (!tool.formDataCheck(formData)) {
          this.$toast({
            type: "fail",
            message: "必填项为空！",
            duration: 1500
          });
          done(false);
          return;
        }
        teamModel
          ._addMember(formData)
          .then(res => {
            return util._done({ res });
          })
          .then(() => {
            setTimeout(() => {
              this.getMemberList();
            }, 1500);
          });
      }
      done();

      this.active = this.personal_type;
      this.personal_type = "";
      this.personal_type_text = "请选择身份";
      this.type = "";
      this.name = "";
      this.mobile = "";
    },
    onConfirm(value, index) {
      this.show_picker = false;
      this.personal_type = index;
      this.personal_type_text = value;
      this.type = value;
    },
    onCancel() {
      this.show_picker = false;
    },
    /* 跳转到购买记录 */
    goToPurchaseRecord(index, item_index) {
      const group_member_id = this.memberList[index].groupMemberList[item_index]
        .group_member_id;
      const name = this.memberList[index].groupMemberList[item_index].name;
      const type = this.memberList[index].groupMemberList[item_index].type;
      this.$router.replace({
        name: "purchase_record",
        params: {
          active: this.active,
          group_member_id,
          name,
          type
        }
      });
    },
    /* 改变tabs时，同时改变active */
    changeActive(index) {
      this.active = index;
    }
  }
};
</script>

<style scoped></style>
